<template>
  <div class="positionJob-wrap">
    <div class="job-list">
      <div class="job-list-item" v-for="(item, index) in positionJobList" :key="index">
        <div class="align-content">
          <div class="align-between">
            <div class="job-name align">{{item.jobName}}</div>
            <div class="job-salary align">{{item.salary}}</div>
          </div>
          <div class="align-between">
            <div class="work-experience align">{{item.workYear}}<p></p>{{item.education}}</div>
            <div class="publish-time align">发布时间{{item.publishTime}}</div>
          </div>
        </div>
        <div class="job-btn" @click="goTalentsPoritait">岗位画像</div>
      </div>
    </div>
  </div>
</template>
<script>
import talents from '@/api/talents'
export default {
  data () {
    return {
      positionJobList: talents.positionJobList
    }
  },
  methods: {
    // 跳转到岗位画像
    goTalentsPoritait () {
      this.$router.push({
        path: '/talents/talents-poritait'
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.positionJob-wrap {
  .job-list {
    .job-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #F1F1F1;
      padding: 30px 0
      .align-content {
        flex: 1
        .align-between {
          display: flex;
          &:last-child {
            margin-top: 20px
          }
          .align {
            flex: 1;
            width: 50%
            &:last-child {
              margin-left: 51px
            }
          }
          .job-name {
            font-size: 16px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #181818;
          }
          .job-salary {
            font-size: 16px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #F04429;
          }
          .work-experience {
            display: flex;;
            align-items: center;
            font-size: 14px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #A1A1A1;
            p {
              width: 1px;
              height: 14px;
              background: #E5E5E5;
              margin: 0 8px
            }
          }
          .publish-time {
            font-size: 14px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #A1A1A1;
          }
        }
      }
      .job-btn {
        width: 88px;
        height: 30px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #4676FE;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #4676FE;
        text-align: center;
        line-height: 28px;
        cursor: pointer
      }
    }
  }
}
</style>